<template>
	<view class="zone">
		<Header title="阵法"></Header>
		<view class="main">

			<view class="zhanbli">
				阵法战力：{{zhanli}}
			</view>
			<view class="tabs">
				<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
					@click="tabchange(item.id)">
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 四象 -->
			<view v-if="stat==1" class="sbg">
				<image class="tbg" src="http://image.qxgm.site/tdz/img/zhenfa/sbg2.png" mode="widthFix"></image>
				<view class="rbox">
					<view class="biaoti">
						<text>四象 LV.{{level1}}</text>
					</view>

					<view class="boximg">
						<image class="sixiang roate" src="http://image.qxgm.site/tdz/img/zhenfa/sbg.png"
							mode="widthFix"></image>
						<view class="silist">
							<view :class="['shbox','si'+(index+1)]" v-for="(item,index) in list[1].material_data"
								:key="index">
								<view :class="['snasme','name'+(index+1)]">
									拥有:{{item.number}}个
								</view>
								<image class="siimg" :src="`http://image.qxgm.site/tdz/img/zhenfa/s${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<image @click="synthesis" class="hecheng"
								src="http://image.qxgm.site/tdz/img/zhenfa/btn.png" mode="widthFix">
							</image>
						</view>
					</view>

					<view class="huoqucai" @click="goto">
						获取材料
					</view>

					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<p class="qp1">玩法说明</p>
							<view class="qp2">
								<p class="qp3">1.激活阵法可以增加大量战力。</p>
								<p class="qp3">2.阵法可以多次激活，战力叠加生效。</p>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 五行 -->
			<view v-if="stat==2" class="sbg">
				<image class="tbg" src="http://image.qxgm.site/tdz/img/zhenfa/wbg2.png" mode="widthFix"></image>
				<view class="rbox">
					<view class="biaoti">
						<text>五行 LV.{{level2}}</text>
					</view>

					<view class="boximg">
						<image class="sixiang roate" src="http://image.qxgm.site/tdz/img/zhenfa/wbg.png"
							mode="widthFix"></image>
						<view class="silist">
							<view :class="['shbox2','wu'+(index+1)]" v-for="(item,index) in list[2].material_data"
								:key="index">
								<view :class="['snasme','wname'+(index+1)]">
									拥有:{{item.number}}个
								</view>
								<image class="siimg" :src="`http://image.qxgm.site/tdz/img/zhenfa/w${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<image @click="synthesis" class="hecheng"
								src="http://image.qxgm.site/tdz/img/zhenfa/btn.png" mode="widthFix">
							</image>
						</view>
					</view>

					<view class="huoqucai" @click="goto">
						获取材料
					</view>

					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<p class="qp1">玩法说明</p>
							<view class="qp2">
								<p class="qp3">1.激活阵法可以增加大量战力。</p>
								<p class="qp3">2.阵法可以多次激活，战力叠加生效。</p>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 六合 -->
			<view v-if="stat==3" class="sbg">
				<image class="tbg" src="http://image.qxgm.site/tdz/img/zhenfa/lbg.png" mode="widthFix"></image>
				<view class="rbox">
					<view class="biaoti">
						<text>六合 LV.{{level3}}</text>
					</view>

					<view class="boximg">
						<image class="sixiang roate" src="http://image.qxgm.site/tdz/img/zhenfa/lbg2.png"
							mode="widthFix"></image>
						<view class="silist">
							<view :class="['shbox3','liu'+(index+1)]" v-for="(item,index) in list[3].material_data"
								:key="index">
								<view :class="['snasme','lname'+(index+1)]">
									拥有:{{item.number}}个
								</view>
								<image class="siimg" :src="`http://image.qxgm.site/tdz/img/zhenfa/l${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<image @click="synthesis" class="hecheng"
								src="http://image.qxgm.site/tdz/img/zhenfa/btn.png" mode="widthFix">
							</image>
						</view>
					</view>

					<view class="huoqucai" @click="goto">
						获取材料
					</view>

					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<p class="qp1">玩法说明</p>
							<view class="qp2">
								<p class="qp3">1.激活阵法可以增加大量战力。</p>
								<p class="qp3">2.阵法可以多次激活，战力叠加生效。</p>
							</view>
						</view>
					</view>
				</view>
			</view>


			<!-- 七星 -->
			<view v-if="stat==4" class="sbg">
				<image class="tbg" src="http://image.qxgm.site/tdz/img/zhenfa/qbg.png" mode="widthFix"></image>
				<view class="rbox">
					<view class="biaoti">
						<text>七星 LV.{{level4}}</text>
					</view>

					<view class="boximg">
						<view class="silist">
							<image class="qbg2" src="http://image.qxgm.site/tdz/img/zhenfa/qbg2.png" mode="widthFix">
							</image>
							<view :class="['snasme','qname'+(index+1)]" v-for="(item,index) in list[4].material_data">
								拥有:{{item.number}}
							</view>
							<image @click="synthesis" class="hecheng2"
								src="http://image.qxgm.site/tdz/img/zhenfa/btn.png" mode="widthFix"></image>
						</view>
					</view>

					<view class="huoqucai" @click="goto">
						获取材料
					</view>

					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<p class="qp1">玩法说明</p>
							<view class="qp2">
								<p class="qp3">1.激活阵法可以增加大量战力。</p>
								<p class="qp3">2.阵法可以多次激活，战力叠加生效。</p>
							</view>
						</view>
					</view>
				</view>
			</view>



			<!-- 八卦 -->
			<view v-if="stat==5" class="sbg">
				<image class="tbg" src="http://image.qxgm.site/tdz/img/zhenfa/bbg.png" mode="widthFix"></image>
				<view class="rbox">
					<view class="biaoti">
						<text>八卦 LV.{{level5}}</text>
					</view>

					<view class="boximg">
						<image class="sixiang roate" src="http://image.qxgm.site/tdz/img/zhenfa/bbg2.png"
							mode="widthFix"></image>
						<view class="silist">
							<view :class="['shbox5','ba'+(index+1)]" v-for="(item,index) in list[5].material_data"
								:key="index">
								<view :class="['snasme','bname'+(index+1)]">
									拥有:{{item.number}}
								</view>
								<image class="siimg" :src="`http://image.qxgm.site/tdz/img/zhenfa/b${index+1}.png`"
									mode="widthFix">
								</image>
							</view>
							<image @click="synthesis" class="hecheng"
								src="http://image.qxgm.site/tdz/img/zhenfa/btn.png" mode="widthFix">
							</image>
						</view>
					</view>

					<view class="huoqucai" @click="goto">
						获取材料
					</view>

					<view class="gbox">
						<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix">
						</image>
						<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix">
						</image>
						<view class="box">
							<p class="qp1">玩法说明</p>
							<view class="qp2">
								<p class="qp3">1.激活阵法可以增加大量战力。</p>
								<p class="qp3">2.阵法可以多次激活，战力叠加生效。</p>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: '四象',
						isrequest: false,
					},
					{
						id: 2,
						name: '五行',
						isrequest: false,
					},
					{
						id: 3,
						name: '六合',
						isrequest: false,
					},
					{
						id: 4,
						name: '七星',
						isrequest: false,
					},
					{
						id: 5,
						name: '八卦',
						isrequest: false,
					},
				],
				stat: 1,
				list: {
					0: [],
					1: [],
					2: [],
					3: [],
					4: [],
					5: [],
				},
				level1: '',
				level2: '',
				level3: '',
				level4: '',
				level5: '',
				zhanli: '',

				hechengID: '',
			}
		},
		onShow() {
			this.getzhenfaList()
		},
		methods: {
			async getzhenfaList() {
				let res = await this.$http.index.zhenfaList()
				if (res.code == 1) {
					this.zhanli = res.data.fight
					this.list[1] = res.data.list[0]
					this.level1 = res.data.list[0].number
					this.list[2] = res.data.list[1]
					this.level2 = res.data.list[1].number
					this.list[3] = res.data.list[2]
					this.level3 = res.data.list[2].number
					this.list[4] = res.data.list[3]
					this.level4 = res.data.list[3].number
					this.list[5] = res.data.list[4]
					this.level5 = res.data.list[4].number

					this.hechengID = this.list[this.stat].id
					console.log(this.hechengID);
				}
			},
			// tab切换
			tabchange(id) {
				this.stat = id;
				this.hechengID = this.list[this.stat].id
				console.log(this.hechengID);
			},
			// 阵法合成
			async synthesis() {
				let res = await this.$http.index.zhenfaSynthesis({
					zhenfa_id: this.hechengID
				})
				if (res.code == 1) {
					this.getzhenfaList()
				}
				this.$u.toast(res.msg)
			},
			// 跳转获取材料
			goto() {
				uni.navigateTo({
					url: '/pages/index/zlrealm?id=' + 7 + '&name=' + '昆仑域'
				})
			}
		}
	}
</script>

<style lang="less">
	.zone {
		position: relative;
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.shuoming {
		position: absolute;
		top: 10px;
		right: 13px;
		width: 60px;
		z-index: 999;
	}

	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(238, 238, 238, 0.1);
		border-radius: 10px;
		padding: 5px 14px;
		box-sizing: border-box;
		margin: 12px 3px 0;

		.tab {
			width: 20%;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-04.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			padding: 4.4% 0;

			text {
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				text-align: center;
				font-size: 18px;
				text-align: center;
				font-weight: normal;
				color: #333333;
				line-height: 24px;
			}
		}

		.act {
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-03.png) no-repeat;
			background-size: 100% 100%;

			text {
				word-wrap: break-word;
				/*英文的时候需要加上这句，自动换行*/
				/*自测了这句话没啥用*/
				writing-mode: vertical-rl;
				/*从左向右 从右向左是 writing-mode: vertical-rl;*/
				writing-mode: tb-rl;
				/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
				text-align: center;
				font-size: 18px;
				font-weight: normal;
				color: #333333;
				line-height: 24px;
				-webkit-text-stroke: 1px #CB6500;
				background: linear-gradient(180deg, #FBE5BE 0%, #FFFFCC 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.zhanbli {
		font-size: 15px;
		font-weight: normal;
		color: #FFF9CC;
		line-height: 18px;
		text-shadow: 0 1px 1px #333333;
		margin-left: 13px;
	}

	.sbg {
		position: relative;
	}

	.tbg {
		width: 100%;
		margin-top: 4px;
	}

	.rbox {
		width: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		.biaoti {
			width: 57%;
			background: url(http://image.qxgm.site/tdz/img/zhenfa/mg-01.png) no-repeat;
			background-size: 100% 100%;
			padding: 7% 0 6%;
			text-align: center;

			text {
				font-size: 18px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 24px;
				background: linear-gradient(0deg, #FBCE79 0%, #FFF3E4 92.3583984375%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.boximg {
			position: relative;
		}

		.sixiang {
			position: relative;
			display: block;
			padding: 24% 0;
			width: 50%;
			margin: 0 auto;
		}

		.roate {
			animation: animal 2s linear infinite;
			-webkit-animation: animal 2s linear infinite;
		}

		@keyframes animal {
			0% {
				transform: rotate(0);
			}

			25% {
				transform: rotate(90deg);
			}

			50% {
				transform: rotate(180deg);
			}

			75% {
				transform: rotate(270deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@-webkit-keyframes animal {
			0% {
				transform: rotate(0);
			}

			25% {
				transform: rotate(90deg);
			}

			50% {
				transform: rotate(180deg);
			}

			75% {
				transform: rotate(270deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}


		// 四象
		.shbox {
			width: 17%;
		}

		.siimg {
			width: 100%;
		}

		.snasme {
			width: 104px;
			font-size: 14px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 23px;
			text-align: center;
			background: rgba(0, 0, 0, 0.45);
			border-radius: 10px;
		}

		.si1 {
			position: absolute;
			top: 4%;
			left: 50%;
			transform: translateX(-50%);
		}

		.si2 {
			position: absolute;
			top: 41%;
			right: 7%;
		}

		.si3 {
			position: absolute;
			bottom: 4%;
			left: 50%;
			transform: translateX(-50%);
		}

		.si4 {
			position: absolute;
			top: 41%;
			left: 7%;
		}

		.name1 {
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.name2 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.name3 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.name4 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.hecheng {
			width: 28%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.vis {
			visibility: hidden;
		}


		.huoqucai {
			display: block;
			width: 116px;
			height: 37px;
			font-size: 18px;
			font-weight: normal;
			line-height: 37px;
			margin: 3vh auto 0;
			color: #fef7c8;
			text-shadow: 0 1px 1px #CB6500;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}






		// 五行
		.shbox2 {
			width: 18%;
		}

		.wu1 {
			position: absolute;
			top: 18%;
			left: 50%;
			transform: translateX(-50%);
		}

		.wu2 {
			position: absolute;
			top: 33%;
			right: 16%;
		}

		.wu3 {
			position: absolute;
			bottom: 22%;
			right: 34%;
			transform: translateX(50%);
		}

		.wu4 {
			position: absolute;
			bottom: 22%;
			left: 34%;
			transform: translateX(-50%);
		}

		.wu5 {
			position: absolute;
			top: 33%;
			left: 16%;
		}

		.wname1 {
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.wname2 {
			position: absolute;
			bottom: -30px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.wname3 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.wname4 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.wname5 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}





		// 六合
		.shbox3 {
			width: 14.6%;
		}

		.liu1 {
			position: absolute;
			top: 17%;
			left: 50%;
			transform: translateX(-50%);
		}

		.liu2 {
			position: absolute;
			top: 29%;
			right: 21%;
		}

		.liu3 {
			position: absolute;
			bottom: 29%;
			right: 29%;
			transform: translateX(50%);
		}

		.liu4 {
			position: absolute;
			bottom: 17%;
			left: 50%;
			transform: translateX(-50%);
		}

		.liu5 {
			position: absolute;
			bottom: 29%;
			left: 29%;
			transform: translateX(-50%);
		}

		.liu6 {
			position: absolute;
			top: 29%;
			left: 21%;
		}

		.lname1 {
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.lname2 {
			position: absolute;
			bottom: -18px;
			right: 3%;
			transform: translateX(50%);
			z-index: 9;
		}

		.lname3 {
			position: absolute;
			bottom: -25px;
			right: 30%;
			transform: translateX(50%);
			z-index: 9;
		}

		.lname4 {
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.lname5 {
			position: absolute;
			bottom: -25px;
			left: 30%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.lname6 {
			position: absolute;
			bottom: -18px;
			left: 3%;
			transform: translateX(-50%);
			z-index: 9;
		}





		// 七星
		.shbox4 {
			width: 14.6%;
		}

		.qbg2 {
			width: 100%;
			padding: 12% 0 12%;
		}

		.hecheng2 {
			display: block;
			margin: 0 auto;
			width: 28%;
		}

		.qname1 {
			width: 60px;
			position: absolute;
			top: 6%;
			left: 0%;
			font-size: 12px;
			z-index: 9;
		}

		.qname2 {
			width: 60px;
			position: absolute;
			top: 35%;
			left: 16%;
			font-size: 12px;
			z-index: 9;
		}

		.qname3 {
			width: 60px;
			position: absolute;
			top: 59%;
			left: 23%;
			font-size: 12px;
			z-index: 9;
		}

		.qname4 {
			width: 60px;
			position: absolute;
			top: 22%;
			left: 42%;
			font-size: 12px;
			z-index: 9;
		}

		.qname5 {
			width: 60px;
			position: absolute;
			top: 51%;
			left: 58%;
			font-size: 12px;
			z-index: 9;
		}

		.qname6 {
			width: 60px;
			position: absolute;
			top: 9%;
			left: 71%;
			font-size: 12px;
			z-index: 9;
		}

		.qname7 {
			width: 60px;
			position: absolute;
			top: 50%;
			right: 0%;
			font-size: 12px;
			z-index: 9;
		}





		// 八卦
		.shbox5 {
			width: 10.7%;
		}

		.ba1 {
			position: absolute;
			top: 17%;
			left: 50%;
			transform: translateX(-50%);
		}

		.ba2 {
			position: absolute;
			top: 23%;
			right: 25%;
		}

		.ba3 {
			position: absolute;
			bottom: 43%;
			right: 22%;
			transform: translateX(50%);
		}

		.ba4 {
			position: absolute;
			bottom: 23%;
			right: 25%;
		}

		.ba5 {
			position: absolute;
			bottom: 17%;
			left: 50%;
			transform: translateX(-50%);
		}

		.ba6 {
			position: absolute;
			bottom: 23%;
			left: 25%;
		}

		.ba7 {
			position: absolute;
			bottom: 43%;
			left: 22%;
			transform: translateX(-50%);
		}

		.ba8 {
			position: absolute;
			top: 23%;
			left: 25%;
		}

		.bname1 {
			width: 66px;
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.bname2 {
			width: 66px;
			position: absolute;
			bottom: -18px;
			right: 3%;
			transform: translateX(50%);
			z-index: 9;
		}

		.bname3 {
			width: 66px;
			position: absolute;
			bottom: -25px;
			right: 30%;
			transform: translateX(50%);
			z-index: 9;
		}

		.bname4 {
			width: 66px;
			position: absolute;
			bottom: -25px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.bname5 {
			width: 66px;
			position: absolute;
			bottom: -25px;
			left: 30%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.bname6 {
			width: 66px;
			position: absolute;
			bottom: -18px;
			left: 3%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.bname7 {
			width: 66px;
			position: absolute;
			bottom: -18px;
			left: 3%;
			transform: translateX(-50%);
			z-index: 9;
		}

		.bname8 {
			width: 66px;
			position: absolute;
			bottom: -18px;
			left: 3%;
			transform: translateX(-50%);
			z-index: 9;
		}
	}

	.gbox {
		position: relative;
		width: 100%;
		margin-top: 1vh;
	}


	.ping1 {
		width: 100%;
		display: flex;
	}

	.yun {
		position: absolute;
		top: -15%;
		left: 0;
		width: 44%;
		z-index: 9;
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		padding: 18px 20px 17px 25px;
		border-bottom: 5px solid #b0a3a1;

		.qp1 {
			font-size: 18px;
			font-weight: normal;
			color: #333333;
			line-height: 24px;
		}

		.qp2 {
			padding: 0 0 0 20%;
		}

		.qp3 {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 20px;
		}
	}
</style>